<style scoped>
.bg {
  position: relative;
  background-image: url(../../assets/img/banner.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}


.user-love {
  padding: 80px 0px;
  background-image: url(../../assets/img/user-love.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 500px;

}

.enroll-group {
  background: linear-gradient(90deg, rgba(161, 196, 253, 0.79) 0%, rgba(194, 233, 251, 0.36) 100%);
  border: 1px solid rgba(255, 222, 218, 0.38);
  border-radius: 20px;
  padding: 30px;
  margin: 80px 0px;
}
</style>
<template>
  <AppHeader />
  <section class="bg flex items-center">
    <div class="container w-10/12 m-auto">
      <div class="flex mt-40">
        <div class="w-6/12">
          <div class="home-slide-face aos" data-aos="fade-up">
            <div class="home-slide-text ">
              <h5 class="text-gray-600 mb-8">少儿编程智慧教育领航者</h5>
              <h1 class="text-6xl leading-20">更懂孩子的优质课程，让孩子迷上编程 更懂老师的贴心服务，让老师爱上教学</h1>
              <p class="text-gray-600 my-8">一站式智慧教育平台，与您携手，共创编程新纪元！</p>
            </div>
            <div class="banner-content">
              <form class="form" action="course-list.html">
                <div class="form-inner">
                  <div class="input-group">
                    <i class="fa-solid fa-magnifying-glass search-icon"></i>
                    <input type="email" class="form-control"
                      placeholder="Search School, Online eductional centers, etc">
                    <span class="drop-detail">
                      <select class="form-select select">
                        <option>Category</option>
                        <option>Angular</option>
                        <option>Node Js</option>
                        <option>React</option>
                        <option>Python</option>
                      </select>
                    </span>
                    <button class="btn btn-primary sub-btn" type="submit"><i class="fas fa-arrow-right"></i></button>
                  </div>
                </div>
              </form>
            </div>
            <div class="trust-user">
              <p>被超过1000+用户信任 <br>自从 2022</p>
              <div class="trust-rating d-flex align-items-center">
                <div class="rate-head">
                  <h2><span>1000</span>+</h2>
                </div>
                <div class="rating d-flex align-items-center">
                  <h2 class="d-inline-block average-rating">4.4</h2>
                  <i class="fas fa-star filled"></i>
                  <i class="fas fa-star filled"></i>
                  <i class="fas fa-star filled"></i>
                  <i class="fas fa-star filled"></i>
                  <i class="fas fa-star filled"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-6/12 flex items-center">
          <div class="girl-slide-img aos" data-aos="fade-up">
            <img src="../../assets/img/object.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="relative" style="margin-top: -60px;">
    <div class="container w-10/12 m-auto grid grid-cols-4 gap-6">
      <div class="flex box p-6 items-center">
        <img style="width:81px;" src="../../assets/img/pencil-icon.svg" alt="">
        <div>
          <h4><span>10</span>+</h4>
          <p>热门学科</p>
        </div>
      </div>

      <div class="flex box p-6 items-center">
        <img style="width:81px;" src="../../assets/img/cources-icon.svg" alt="">
        <div class="ml-4">
          <h4><span>300</span>+</h4>
          <p>精品课时</p>
        </div>
      </div>

      <div class="flex box p-6 items-center">
        <img style="width:81px;" src="../../assets/img/certificate-icon.svg" alt="">
        <div class="ml-4">
          <h4><span>5</span>K+</h4>
          <p>案例作品</p>
        </div>
      </div>

      <div class="flex box p-6 items-center">
        <img style="width:81px;" src="../../assets/img/gratuate-icon.svg" alt="">
        <div class="ml-4">
          <h4><span>8</span>K +</h4>
          <p>竞赛真题</p>
        </div>
      </div>
    </div>
  </section>


  <section class="section mt-20">
    <div class="container w-10/12 m-auto">
      <div class="flex justify-between items-center">
        <div class="section-sub-head">
          <span>Favourite Course</span>
          <h2 class="text-4xl font-blod my-4">学科</h2>
        </div>
        <div class="all-btn all-category d-flex align-items-center">
          <a href="job-category.html" class="btn btn-enter">All Categories</a>
        </div>
      </div>
      <div class="section-text aos" data-aos="fade-up">
        <p>对标国际计算机教学标准,打造具有趣味性、科学性、渐进性的编程学习体系,可以覆盖6 - 16岁各年龄段的学习需求</p>
      </div>
      <div class="grid grid-cols-6 gap-3 my-8">
        <div class="box p-4 text-center ">
          <img class="m-auto" style="width: 105px;" src="../../assets/img/categories-icon.png" alt="">
          <div class="mt-4">
            <div class="feature-text">Scratch</div>
          </div>
          <p>40 Instructors</p>
        </div>
        <div class="box p-4 text-center ">
          <img class="m-auto" style="width: 105px;" src="../../assets/img/categories-icon-01.png" alt="">
          <div class="mt-4">
            <div class="feature-text">Python</div>
          </div>
          <p>45 Instructors</p>
        </div>
        <div class="box p-4 text-center ">
          <img class="m-auto" style="width: 105px;" src="../../assets/img/categories-icon-02.png" alt="">
          <div class="mt-4">
            <div class="feature-text">C++</div>
          </div>
          <p>40 Instructors</p>
        </div>

        <div class="box p-4 text-center ">
          <img class="m-auto" style="width: 105px;" src="../../assets/img/categories-icon-03.png" alt="">
          <div class="mt-4">
            <div class="feature-text">数学思维</div>
          </div>
          <p>23 Instructors</p>
        </div>
        <div class="box p-4 text-center ">
          <img class="m-auto" style="width: 105px;" src="../../assets/img/categories-icon-04.png" alt="">
          <div class="mt-4">
            <div class="feature-text">计算思维</div>
          </div>
          <p>30 Instructors</p>
        </div>
        <div class="box p-4 text-center ">
          <img class="m-auto" style="width: 105px;" src="../../assets/img/categories-icon-05.png" alt="">
          <div class="mt-4">
            <div class="feature-text">逻辑思维</div>
          </div>
          <p>80 Instructors</p>
        </div>
      </div>
    </div>
  </section>


  <section class="section pt-20 pb-14 bg">
    <div class="container w-10/12 m-auto">
      <div class="flex justify-between items-center my-8">
        <div class="section-sub-head">
          <h2 class="text-4xl font-blod my-4">最新课程</h2>
        </div>
        <div class="all-btn all-category d-flex align-items-center">
          <a href="course-list.html" class="btn-enter">All Courses</a>
        </div>
      </div>
      <p class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eget aenean accumsan
        bibendum gravida maecenas augue elementum et neque. Suspendisse imperdiet.</p>
      <div class="course-feature">
        <div class="grid grid-cols-3 gap-6">
          <div v-for="i in 6" :key="i" class="col-lg-4 col-md-6 d-flex">
            <div class="box p-4">
              <div class="relative">
                <a href="course-details.html">
                  <img class="img-fluid" alt="" src="../../assets/img/course/course-01.jpg">
                </a>
                <div class="absolute right-5 bottom-3 bg-gray-100 rounded-md p-1">
                  <h5>$300 <span>$99.00</span></h5>
                </div>
              </div>
              <div class="product-content">
                <div class="flex justify-between items-center">
                  <div class="flex items-center my-4">
                    <a href="instructor-profile.html">
                      <img style="width: 50px;height: 50px;" src="../../assets/img/user/user1.jpg" alt=""
                        class="img-fluid rounded-full">
                    </a>
                    <div class="course-name">
                      <h5><a href="instructor-profile.html">张老师</a></h5>
                      <p>金牌讲师</p>
                    </div>
                  </div>
                  <div class="flex items-center justify-center">
                    <a href="#"><i class="fa-regular fa-heart"></i></a>
                  </div>
                </div>
                <h4 class="title instructor-text border-b border-gray-200 pb-4 mb-4"><a href="course-details.html">
                    考前突击20讲</a></h4>
                <div class="flex justify-between mb-4">
                  <div class="flex items-center">
                    <img style="width:18px;" src="../../assets/img/icon/icon-01.svg" alt="">
                    <p>12+ Lesson</p>
                  </div>
                  <div class="flex items-center">
                    <img style="width:18px;" src="../../assets/img/icon/icon-02.svg" alt="">
                    <p>9hr 30min</p>
                  </div>
                </div>
                <div class="all-btn all-category d-flex align-items-center">
                  <button class="btn-enter">BUY NOW</button>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>


  <section class="section pt-20 pb-14 master-skill">
    <div class="container w-10/12 m-auto">
      <div class="grid grid-cols-2">
        <div>
          <div class="section-sub-head">
            <span>What’s New</span>
            <h2>掌握核心技能，助力起飞</h2>
          </div>
          <p>Get certified, master modern tech skills, and level up your career — whether you’re
            starting out or a seasoned pro. 95% of eLearning learners report our hands-on content
            directly helped their careers.</p>
          <div class="grid grid-cols-2 gap-5 mt-10">
            <div class="flex items-center p-4 border border-1 border-gray-100 rounded-lg">
              <img style="width:72px;" src="../../assets/img/icon/icon-1.svg" alt="" class="img-fluid">
              <p class="text-ls ml-4">Stay motivated with engaging instructors</p>
            </div>
            <div class="flex items-center p-4 border border-1 border-gray-100 rounded-lg">
              <img style="width:72px;" src="../../assets/img/icon/icon-2.svg" alt="" class="img-fluid">
              <p class="text-ls ml-4">Keep up with in the latest in cloud</p>
            </div>

            <div class="flex items-center p-4 border border-1 border-gray-100 rounded-lg">
              <img style="width:72px;" src="../../assets/img/icon/icon-3.svg" alt="" class="img-fluid">
              <p class="text-ls ml-4">Get certified with 100+ certification courses</p>
            </div>
            <div class="flex items-center p-4 border border-1 border-gray-100 rounded-lg">
              <img style="width:72px;" src="../../assets/img/icon/icon-4.svg" alt="" class="img-fluid">
              <p class="text-ls ml-4">Build skills your way, from labs to courses</p>
            </div>
          </div>
        </div>
        <div class="flex items-center justify-center">
          <img src="../../assets/img/join.png" alt="" class="img-fluid">
        </div>
      </div>
    </div>
  </section>


  <section class="section bg">
    <div class="container w-10/12 m-auto pt-10">

      <h2 class="text-4xl font-blod my-4 text-center">一流的教研团队</h2>
      <div class="section-text aos" data-aos="fade-up">
        <p class="mb-0">好的老师才能让您学的更好！
        </p>
      </div>

      <div class="grid grid-cols-4 gap-8 py-8">
        <div class="box">
          <div class="instructors-img ">
            <a href="instructor-list.html">
              <img class="img-fluid" alt="" src="../../assets/img/user/user7.jpg">
            </a>
          </div>
          <div class="instructors-content text-center">
            <h5 class="py-4 text-lg"><a href="instructor-profile.html">超平老师</a></h5>
            <p class="text-gray-600">Web Developer</p>
            <div class="student-count d-flex justify-content-center">
              <i class="fa-solid fa-user-group"></i>
              <span>50 Students</span>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="instructors-img">
            <a href="instructor-list.html">
              <img class="img-fluid" alt="" src="../../assets/img/user/user8.jpg">
            </a>
          </div>
          <div class="instructors-content text-center">
            <h5 class="py-4 text-lg"><a href="instructor-profile.html">有福老师</a></h5>
            <p class="text-gray-600">PHP Expert</p>
            <div class="student-count d-flex justify-content-center py-2 mb-2">
              <i class="fa-solid fa-user-group yellow"></i>
              <span>50 Students</span>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="instructors-img">
            <a href="instructor-list.html">
              <img class="img-fluid" alt="" src="../../assets/img/user/user9.jpg">
            </a>
          </div>
          <div class="instructors-content text-center">
            <h5 class="py-4 text-lg"><a href="instructor-profile.html">郑奎</a></h5>
            <p class="text-gray-600">Web Developer</p>
            <div class="student-count d-flex justify-content-center">
              <i class="fa-solid fa-user-group violet"></i>
              <span>50 Students</span>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="instructors-img">
            <a href="instructor-list.html">
              <img class="img-fluid" alt="" src="../../assets/img/user/user10.jpg">
            </a>
          </div>
          <div class="instructors-content text-center">
            <h5 class="py-4 text-lg"><a href="instructor-profile.html">高泽峰</a></h5>
            <p class="text-gray-600">UI Designer</p>
            <div class="student-count d-flex justify-content-center">
              <i class="fa-solid fa-user-group orange"></i>
              <span>50 Students</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>


  <section class="section py-8">
    <div class="container w-10/12 m-auto">
      <div class="section-header aos" data-aos="fade-up">
        <div class="section-sub-head feature-head text-center">
          <span class="text-red-300 text-bold">Trusted By</span>
          <h2 class="text-4xl font-blod  py-8">500+ Leading Universities And Companies</h2>
        </div>
      </div>
      <div class="flex items-center justify-between">
        <div class="item">
          <div class="lead-img">
            <img class="img-fluid" alt="" src="../../assets/img/lead-01.png">
          </div>
        </div>
        <div class="item">
          <div class="lead-img">
            <img class="img-fluid" alt="" src="../../assets/img/lead-02.png">
          </div>
        </div>
        <div class="item">
          <div class="lead-img">
            <img class="img-fluid" alt="" src="../../assets/img/lead-03.png">
          </div>
        </div>
        <div class="item">
          <div class="lead-img">
            <img class="img-fluid" alt="" src="../../assets/img/lead-04.png">
          </div>
        </div>
        <div class="item">
          <div class="lead-img">
            <img class="img-fluid" alt="" src="../../assets/img/lead-05.png">
          </div>
        </div>
        <div class="item">
          <div class="lead-img">
            <img class="img-fluid" alt="" src="../../assets/img/lead-06.png">
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section user-love">
    <div class="container">
      <div class="section-header white-header aos" data-aos="fade-up">
        <div class="section-sub-head feature-head text-center text-white">
          <span class="font-blod py-4">Check out these real reviews</span>
          <h2 class="text-4xl font-blod  py-8">Users-love-us Don't take it from us.</h2>
        </div>
      </div>
    </div>
  </section>


  <section class="testimonial-four">
    <div class="review">
      <div class="container w-10/12 m-auto">
        <div style="width: 880px; margin-top:-240px;"
          class="m-auto relative border-8 border-gray-200 rounded-3xl bg-cyan-50 p-20">
          <div class="testi-quotes">
            <img class="absolute left-0" style="width: 75px; top:-35px" src="../../assets/img/qute.png" alt="">
            <img class="absolute top-10 right-10" style="width: 51px;" src="../../assets/img/qute-01.png" alt="">
          </div>
          <div class="testi-items">
            <div class="flex flex-col items-center">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the
                1500s, when an unknown printer took a galley of type and scrambled it to
                make a type specimen book.</p>

              <a href="instructor-profile.html">
                <img style="width:80px;" class="rounded-full mt-6" src="../../assets/img/user/user1.jpg" alt=""></a>
              <h3><a href="instructor-profile.html">Daziy Millar</a></h3>
              <span>Founder of Awesomeux Technology</span>
            </div>
          </div>

        </div>

        <div class="flex gap-6 my-24">
          <div class="w-1/2 p-8 rounded-3xl relative" style="background-color: #FFDEDA;">
            <h4 class="mb-4">Become An Instructor</h4>
            <p class="w-6/12">Top instructors from around the world teach millions of
              students on Mentoring.</p>
            <img class="img-fluid absolute top-0 right-0" style="width: 250px;" alt=""
              src="../../assets/img/become-02.png">
          </div>

          <div class="w-1/2 p-8 rounded-3xl relative" style="background-color: #FFE88F;">
            <h4 class="mb-4">Become An Instructor</h4>
            <p class="w-6/12">Top instructors from around the world teach millions of
              students on Mentoring.</p>
            <img class="img-fluid absolute top-0 right-0" style="width: 250px;" alt=""
              src="../../assets/img/become-01.png">
          </div>

        </div>
      </div>
    </div>
  </section>


  <section class="section latest-blog pt-20 pb-14 bg">
    <div class="container w-10/12 m-auto">
      <div class="section-header aos" data-aos="fade-up">
        <div class="section-sub-head feature-head text-center mb-0">
          <h2 class="text-4xl font-blod my-4 text-center">新闻速递</h2>
          <p class="my-8">这儿是我们的最新的新闻.</p>
        </div>
      </div>
      <div class="grid grid-cols-4 gap-6">
        <div class="box pb-4" v-for="i in 4" :key="i">
          <div class="instructors-img">
            <a href="blog-list.html">
              <img class="img-fluid" alt="" src="../../assets/img/blog/blog-01.jpg">
            </a>
          </div>
          <div class="instructors-content text-center">
            <h5 class="font-bold my-3"><a href="blog-list.html">Attract More Attention Sales And Profits</a></h5>
            <p class="text-gray-600">Marketing</p>
            <div class="mt-2">
              <i class="fa-solid fa-calendar-days"></i>
              <span>Jun 15, 2022</span>
            </div>
          </div>
        </div>
      </div>
      <div class="enroll-group aos" data-aos="fade-up">
        <div class="grid grid-cols-3 gap-4">
          <div class="flex items-center">
            <div class="p-2 rounded-xl bg-white">
              <img style="width:75px;" src="../../assets/img/icon/icon-07.svg" alt="" class="img-fluid">
            </div>
            <div class="ml-8">
              <h3><span class="counterUp">100</span>+</h3>
              <p>机构&学校</p>
            </div>
          </div>
          <div class="flex items-center">
            <div class="p-2 rounded-xl bg-white">
              <img style="width:75px;" src="../../assets/img/icon/icon-08.svg" alt="" class="img-fluid">
            </div>
            <div class="ml-8">
              <h3><span class="counterUp">300</span>+</h3>
              <p>编程教师</p>
            </div>
          </div>
          <div class="flex items-center">
            <div class="p-2 rounded-xl bg-white">
              <img style="width:75px;" src="../../assets/img/icon/icon-09.svg" alt="" class="img-fluid">
            </div>
            <div class="ml-8">
              <h3><span class="counterUp">5000</span>+</h3>
              <p>学生</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="lab-course">
      <div class="section-header aos" data-aos="fade-up">
        <div class="section-sub-head feature-head text-center">
          <h2 class="text-4xl font-blod my-4 text-center">无限畅学360+课程 <br>1600个实战项目</h2>
        </div>
      </div>
      <div class="icon-group aos" data-aos="fade-up">
        <div class="offset-lg-1 col-lg-12">
          <div class="flex justify-center items-center">
            <img style="width:44px;" src="../../assets/img/icon/icon-09.svg" alt="" class="mx-4">
            <img style="width:44px;" src="../../assets/img/icon/icon-10.svg" alt="" class="mx-4">
            <img style="width:44px;" src="../../assets/img/icon/icon-16.svg" alt="" class="mx-4">

            <img style="width:44px;" src="../../assets/img/icon/icon-12.svg" alt="" class="mx-4">

            <img style="width:44px;" src="../../assets/img/icon/icon-13.svg" alt="" class="mx-4">

            <img style="width:44px;" src="../../assets/img/icon/icon-14.svg" alt="" class="mx-4">

            <img style="width:44px;" src="../../assets/img/icon/icon-15.svg" alt="" class="mx-4">

            <img style="width:44px;" src="../../assets/img/icon/icon-16.svg" alt="" class="mx-4">

            <img style="width:44px;" src="../../assets/img/icon/icon-17.svg" alt="" class="mx-4">

            <img style="width:44px;" src="../../assets/img/icon/icon-18.svg" alt="" class="mx-4">
          </div>
        </div>
      </div>
    </div>
  </section>

  <AppFooter />
</template>
<script setup>
// useHead({
//   script: [
//     { src: '/plugins/feather/feather.min.js', body: true },

//     { src: '/js/jquery.waypoints.js', body: true },
//     { src: '/js/jquery.counterup.min.js', body: true },

//     { src: '/plugins/select2/js/select2.min.js', body: true },

//     { src: '/js/owl.carousel.min.js', body: true },

//     { src: '/plugins/slick/slick.js', body: true },

//     { src: '/plugins/aos/aos.js', body: true },
//     { src: '/plugins/theia-sticky-sidebar/ResizeSensor.js', body: true },
//     { src: '/plugins/theia-sticky-sidebar/theia-sticky-sidebar.js', body: true },

//     { src: '/js/script.js', body: true }

//   ],
// });
</script>